<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级菜单</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        a{
            text-decoration: none;
            display: inline-block;
           color:black;
        }
        ul{
            list-style-type: none;
        }

        /*.drop_down_one{padding-left: 25px}*/
        .drop_down_two{display: none;margin-left: 25px}
        .drop_down__three{display: none;margin-left: 25px}
        .span1{
            background: url(right.png) no-repeat;
            background-size: 20px 20px;
            display: inline-block;
            width: 20px;
            height:20px;
            background-position: 0px 3px;
            padding-right: 10px;
        }
		li{
			line-height:20px;
		}
		.activeLi{
			color:#DE8A3E;
		}
    </style>
    <script>
        $(function () {
			$('a').each(function (index,value) {
               $(value).click(function () {
                   //alert(index);
                   for(var i=0;i<$('a').length;i++)
                   {
                       if(i==index)
                       {
                           $('a').eq(i).css('color','#DE8A3E');
                       }
                       else
                       {
                           $('a').eq(i).css('color','black');
                       }
                   }
               });
            });
            //span1  .do-drop-down
            $('.drop_down_one li p').each(function(index,value){
				
                $(value).click(function(event){
					//event.preventDefault();
					if($(value).parent('li').hasClass('do-drop-down'))
					{						
						$(value).parent('li').addClass('undo-drop-down').removeClass('do-drop-down');
                        $(value).parent('li').children("ul").show();
                    	$(value).children(".span1").css('background-image',"url(bottom.jpg)");
						return;
					}
                    else if($(value).parent('li').hasClass('undo-drop-down'))
					{					
						event.preventDefault();
						$(value).parent('li').removeClass('undo-drop-down').addClass('do-drop-down');
                        $(value).parent('li').children("ul").hide();
                    	$(value).children(".span1").css('background-image',"url(right.png)");
						return;
					}
					//alert($('.drop_down_one li.undo-drop-down').length);
                });
            });           
        });
    </script>
</head>
<body>
<div>
    <ul class="drop_down_one">
        <li class="do-drop-down"> <p><span class="span1"></span><a href="#">一级菜单1</a></p>
            <ul class="drop_down_two">
                <li class="do-drop-down"><p><span class="span1"></span><a href="#">二级菜单1</a></p>
                    <ul class="drop_down__three">
                        <li><a href="javascript:;">三级菜单1</a></li>
                        <li><a href="javascript:;">三级菜单1</a></li>
                        <li><a href="javascript:;">三级菜单1</a></li>
						<li><a href="javascript:;">三级菜单1</a></li>
                    </ul>
                </li>
                <li>二级菜单1</li>
                <li>二级菜单1</li>
            </ul>
        </li>
        <li class="do-drop-down"> <p><span class="span1"></span><a href="#">一级菜单1</a></p>
            <ul class="drop_down_two">
                <li class="do-drop-down"><p><span class="span1"></span><a href="#">二级菜单1</a></p>
                    <ul class="drop_down__three">
                        <li><a href="javascript:;">三级菜单1</a></li>
                        <li><a href="javascript:;">三级菜单1</a></li>
                        <li><a href="javascript:;">三级菜单1</a></li>
						<li><a href="javascript:;">三级菜单1</a></li>
                    </ul>
                </li>
                
                        <li><a href="javascript:;">二级菜单1</a></li>
						<li><a href="javascript:;">二级菜单1</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>